<template>
  <a-card :bordered="false">
    <div>
      <a-table
        ref="table"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        rowKey="id"
        :pagination="false"
      >
        <template slot="area" slot-scope="text,record,index">
          <div>
            <div>{{record.id==1?'公告':'关于我们'}}</div>
          </div>
        </template>
        <template slot="action" slot-scope="text,record,index">
          <div>
            <a-button type="primary" icon="edit" @click="handleEdit(record)">编辑</a-button>
          </div>
        </template>
      </a-table>
    </div>
    <a-modal
      :title="modal_title"
      :visible="modal_visible"
      :confirmLoading="loading"
      width="60%"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item label="ID" :labelCol="labelCol" :wrapperCol="wrapperCol" style="display:none">
          <a-input v-decorator="['id']" style="display:none" :disabled="true"></a-input>
        </a-form-item>
        <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['title']"></a-input>
        </a-form-item>
        <a-form-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['content']" style="display:none" :disabled="true"></a-input>
          <tinymce-editor ref="editor" v-model="msg" @onClick="onClick"></tinymce-editor>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import { postAction, baseUrl } from '@/api/manage.js'
import TinymceEditor from '@/components/TinyEditor/tiny-editor'

export default {
  data() {
    return {
      columns: [
        { title: '区域', align: 'center', scopedSlots: { customRender: 'area' } },
        { title: '标题', align: 'center', dataIndex: 'title' },
        { title: '内容', align: 'center', dataIndex: 'content', width: 200 },
        { title: '操作', align: 'center', scopedSlots: { customRender: 'action' } }
      ],
      dataSource: [],
      loading: false,
      modal_title: '',
      modal_visible: false,
      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
      labelCol: {
        lg: {
          span: 7
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        lg: {
          span: 10
        },
        sm: {
          span: 17
        }
      },
      msg: ''
    }
  },
  components: {
    TinymceEditor
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      postAction('/sysmsg/datasettingall', '').then(res => {
        // console.log(res)
        this.loading = false
        this.dataSource = res.data
      })
    },
    handleEdit(item) {
      //   console.log(item)
      this.modal_title = '编辑内容'
      this.msg = item.content
      setTimeout(() => {
        this.form.setFieldsValue({
          id: item.id,
          title: item.title
        })
      })
      this.modal_visible = true
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        // console.log(err)
        if (!err) {
          this.loading = true
          this.form.setFieldsValue({
            content: this.msg
          })
          postAction('/sysmsg/updatemsg', this.form.getFieldsValue()).then(res => {
            this.loading = false
            this.msg = ''
            this.form.resetFields()
            this.modal_visible = false
            this.getData()
          })
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.modal_visible = false
    },
    onClick(e, t) {
      // console.log(e)
      // console.log(t)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>